<template>
  <div class="flex-center" v-if="iconCondition">
     <div class="city">{{ weather.city }}</div>
     <div class="temperature">{{ weather.temperature }}<span style="font-size:14px;margin-left:2px;">℃</span></div>
     <div class="humidity">{{ weather.humidity }}<span style="font-size:14px;margin-left:2px;">%</span></div>
     <skycon v-if="iconCondition" :condition="iconCondition" color="white" size="50" />
     <div class="weather-situation">{{ weather.weather }}</div>
     <div class="weather-wind">{{ weather.winddirection }}风&nbsp;&nbsp;{{weather.windpower}}级</div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      key: '6b9a0f1d23ebee83805fef9431edfdca', //自己的key，建议自己申请
      weather: {
          province: "广东",
          city: "海珠区",
          adcode: "440105",
          weather: "晴天",
          temperature: "26",
          winddirection: "南",
          windpower: "5",
          humidity: "68",
          reporttime: "2025-03-14 17:00:19",
          temperature_float: "26.0",
          humidity_float: "68.0"
      },//用于存放天气相关的数据
      iconCondition: 'clear-day',//icon值
    }
  },
  mounted() {
    this.getLocationInfo();
  },
  methods: {
    // 获取用户位置信息
    async getLocationInfo() {
      const params = {
        key: this.key,
      };
      //const { data } = await axios.get('https://restapi.amap.com/v3/ip', { params });
      const { data } = await axios.get('/amap/v3/ip', { params });
      //data.adcode值为获取天气需要的city值
      this.getWeather(data.adcode);
    },
    // 获取天气详情
    async getWeather(adcode) {
      const params = {
        key: this.key,
        city: adcode,
      };
      //const { data } = await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo`, { params });
      const { data } = await axios.get(`/amap/v3/weather/weatherInfo`, { params });
      this.weather = data.lives[0];
      this.iconCondition = this.setWeatherIcon(data.lives[0]?.weather);
    },
    //设置时间只显示年月日
    formatDate(weather) {
      const date = new Date(weather.reporttime);
      const year = date.getFullYear();
      const month = (1 + date.getMonth()).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 设置icon
    setWeatherIcon(weather) {
      // 只处理了基础的天气，可以继续精细化处理
      if (weather === '晴') {
        return 'clear-day';
      } else if (weather.includes('云')) {
        return 'partly-cloudy-day';
      } else if (weather.includes('风')) {
        return 'wind';
      } else if (weather.includes('雨')) {
        return 'rain';
      } else if (weather.includes('雪')) {
        return 'snow';
      } else if (weather.includes('雾')) {
        return 'fog';
      }
      return 'cloudy';
    },
  }
}

</script>

<style lang='scss' scoped>
.flex-center {
  width: 400px;
  height: 55px;
  cursor: pointer;
  .table{
    width: 100%;
  }
  .city {
    color:Orange;
    font-weight:bold;
    font-size:18px;
    margin-left: 10px;
    display: flex;
    align-items: center;  /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 55px; /* 必须设置高度 */
  }
  .temperature {
    color:MediumTurquoise;
    font-weight:bold;
    font-size:18px;
    margin-left: 10px;
    display: flex;
    align-items: center;  /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 55px; /* 必须设置高度 */
   }
  .humidity {
    color: #ffffff;
    font-weight:bold;
    font-size:18px;
    margin-left: 10px;
    margin-right: 10px;
    display: flex;
    align-items: center;  /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    height: 55px; /* 必须设置高度 */
  }
   .weather-situation {
     color: #ffffff;
     font-weight:bold;
     font-size:18px;
     margin-left: 10px;
     display: flex;
     align-items: center;  /* 垂直居中 */
     justify-content: center; /* 水平居中 */
     height: 55px; /* 必须设置高度 */
   }
   .weather-wind {
     color: #ffffff;
     font-weight:bold;
     font-size:18px;
     margin-left: 10px;
     display: flex;
     align-items: center;  /* 垂直居中 */
     justify-content: center; /* 水平居中 */
     height: 55px; /* 必须设置高度 */
   }
}
</style>
